<template>
    <div class="attr-wrapper">

        <div v-for="(item,index) in localAttrList" :key="index">

            <div class="attr-row attr-row_strip flex-box">
                <div class="attr-row__title">属性名</div>
                <el-input class="attr-row__input" size="small" v-model="item.name"></el-input>
                <div class="flex-box__item"></div>
                <i class="el-icon-circle-close attr-row__remove" @click="removeOne(index)"></i>
            </div>

            <div class="attr-row flex-box">
                <div class="attr-row__title">属性值</div>
                <div v-for="(input, idx) in item.list" :key="idx">
                    <el-input class="attr-row__input" size="small" v-model="input.value" @blur="genHash">
                        <i class="el-icon-close el-input__icon attr-row__remove" slot="suffix"
                           @click="removeItem(index,idx)"></i>
                    </el-input>
                </div>
                <el-button type="text" @click="addItem(index)">增加属性值</el-button>
            </div>
        </div>

        <div class="attr-row attr-row_strip flex-box">
            <el-button @click="addOne" :disabled="addLimit">增加属性项目</el-button>
            <div v-show="addLimit" class="add-limit">最多只能添加3个属性项目</div>
        </div>
    </div>
</template>

<script>
    export default {
        // 全局感知
        name: "AddAttr",

        // 模板依赖
        components: {},
        filters: {},

        // 接口
        props: {
            attrList: {
                type: Array,
                required: false,
                default: () => ([])
            },
            hash: {
                type: Number,
                required: true
            }
        },

        // 本地状态
        data() {
            return {
                localAttrList: this.attrList,
                localHash: this.hash,
                currentAttr: null
            };
        },
        computed: {
            addLimit() {
                return this.localAttrList.length >= 3
            }
        },

        // 事件
        watch: {
            attrList(list) {
                // console.log('喵', list)
                // this.localAttrList = list
                // if(!list) return this.localAttrList = list;
                this.localAttrList = list.length > 0 ? list.map(res => {
                        if(res.options){
                            res.options = res.options.split(',').map(item => {
                                return {value: item}
                            })
                        }else {
                            res.options = [{value: res.options}]
                        }

                    return {name: res.name, list: res.options}
                }) : list
                // this.genHash()
            },
            localHash(localHash) {
                this.$emit('update:attrList', this.localAttrList)
                this.$emit('update:hash', localHash)
            },
            hash(hash) {
                this.localHash = hash
            }
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
        },
        beforeUpdate() {
        },
        updated() {
        },
        beforeDestroy() {
        },
        destroyed() {
        },

        // 非响应式的属性
        methods: {
            addOne() {
                const empty = {name: '', list: [{value: ''}]}
                this.localAttrList.push(empty)
            },
            removeOne(index) {
                this.localAttrList.splice(index, 1)
                this.genHash()
            },
            addItem(index) {
                this.localAttrList[index].list.push({value: ''})
            },
            removeItem(index, idx) {
                this.localAttrList[index].list.splice(idx, 1)
                this.genHash()
            },
            genHash() {
                this.localHash = Math.random()
            }
        }
    }
</script>

<style lang="less" scoped>
    .flex-box {
        display: flex;

        box-sizing: border-box;

        align-items: center;
        &__item {
            flex: 1;
        }
    }

    .add-limit {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
    }

    .attr {
        &-wrapper {
            box-sizing: border-box;
            width: 100%;
            padding: 20px;
            margin-left: 20px;

            border: 1px solid #d8d8d8;
        }
        &-row {
            width: 100%;
            height: 52px;
            padding: 0 20px;
            &_strip {
                background: #f6f6f6;
                &:hover .attr-row__remove {
                    display: block;
                }
            }
            &__title {
                width: 5em;

                color: #333;

                font-size: 14px;
            }
            &__input {
                width: 140px;
                margin-right: 10px;
                &:hover .attr-row__remove {
                    display: block;
                }
            }
            &__remove {
                display: none;
            }
        }
    }
</style>